<!DOCTYPE html>
<html>
<head>
	<title>aaa</title>
	<style type="text/css">
	*{
		margin:0;
		padding: 0;
		list-style: none;
	}
	body{
		background: #ff0;
	}
	#block{
		width: 300px;
		height:300px;
		background: #666;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	#poiner #circel{
		width: 20px;
		height: 20px;
		background: #fff;
		border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);


	}
#line-min li, #line-hour li{
	background: #fff;
	position: absolute;
	top: 50%;
	left:50%;
	transform-origin: left center;
}

#line-min li{
	width: 10px;
	height: 2px;
	
	
}
#line-hour li{
	width: 25px;
	height: 2px;
	
	
}
#number {
	height: 250px;
	width: 250px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);


}
#number li{
color: #fff;
position: absolute;
font-size: 15px;
transform: translate(-50%, -50%);
}


#hour{
	width: 60px;
	height: 3px;
}#min{
	width: 80px;
	height: 2px;
}#sec{
	width: 120px;
	height: 1px;
}
#poiner li{
	background: #fff;
	position: absolute;
	top: 50%;
	left:50%;
	transform-origin: left center;
}

	</style>
</head>
<body>
<div id="block">
	<ul id="line-hour"></ul>
	<ul id="line-min"></ul>
	<ul id="number"></ul>
	<ul id="poiner">
		<li id="hour"></li>
		<li id="min"></li>
		<li id="sec"></li>
		<li id="circel"></li>
	</ul>
</div>
<script type="text/javascript">
	function id(a) {
		return document.getElementById(a);
	}
	(function () {
		var hh = "";
		for(var i=0;i<60;i++){
			hh += `<li style="transform: rotate(${6*i}deg) translate(135px,0) ;"></li>`;
		}
		id('line-min').innerHTML = hh;
		 hh = "";
		for(var i=0;i<12;i++){
			hh += `<li style="transform: rotate(${30*i}deg) translate(125px,0) ;"></li>`;
		}
		id('line-hour').innerHTML = hh;

		 hh = "";
		 var r=250/2;
		for(var i=1;i<=12;i++){
			var angl = (i-3)/6*Math.PI;
			hh += `<li style="top:${r+r*Math.sin(angl)}px;left:${r+r*Math.cos(angl)}px;">${i}</li>`;
		}
		id('number').innerHTML = hh;


	})();

	(function () {
		function getData() {
			var date = new Date();
			var rr = [
				date.getSeconds(),
				date.getMinutes(),
				date.getHours()
			];
			var dd = [6,6,30].map((t,i)=>t*rr[i]);
			dd[1]+=rr[0]*0.1;
			dd[2]+=rr[1]*0.5;

			rr = dd.map(item => item -90)
			console.log(rr[0]*0.1)
			
			return rr;
		}

		setInterval(function () {
			var dd = getData();
			"sec,min,hour".split(',').forEach((item,index)=>{
				id(item).style.transform = 'rotate('+dd[index]+'deg)'

			});

		}, 1000);
		
	})();
</script>
</body>
</html>